import React,{useState,useEffect} from 'react'
import {Button, Input, Space,Drawer } from 'antd';
import { AudioOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import '../style/search.less'
export default function searchForm(props:any) {
    const { Search } = Input;
    const [formItem,setFormItem]:any = useState({})
    const [teacherType,setTeacherType] = useState([
        {value:1,label:'普通讲师'},
        {value:2,label:'高级讲师'},
        {value:3,label:'特聘讲师'},
        {value:4,label:'超级讲师'},
    ])
    const goodOf = [
        {
            id:1,
            name:'店铺运营',
            show:false
        },
        {
            id:2,
            name:'运营',
            show:false
        },
        {
            id:3,
            name:'新手',
            show:false
        },
        {
            id:4,
            name:'导师',
            show:false
        },
        {
            id:5,
            name:'高级导师',
            show:false
        },
        {
            id:6,
            name:'体验中心',
            show:false
        },
        {
            id:7,
            name:'中级导师',
            show:false
        },
        {
            id:8,
            name:'店铺运营',
            show:false
        }
    ]
    const [chooseGoodOf,setChooseGoodOf]:any = useState([])
    const [visible, setVisible] = useState(false);
    useEffect(()=>{
        setFormItem({...props.form})
    },[])
    const onClose = () => {
      setVisible(false);
    }
    const onSearch = (value: any) => {
        let newName:any = Object.assign({},formItem)
        newName.username = value
        setFormItem(newName)
        handleFormSearch(newName)
    }
    function changeButton(item:any){
        let newName:any = Object.assign({},formItem)
        newName.status = item.value
        setFormItem(newName)
        handleFormSearch(newName)
    }
     // 调用查询组件
    function handleFormSearch(newName:Object){
        props.search(newName)
    }
    // 点击展示筛选栏
    function showTags(){
        setVisible(true);
    }
    // 点击筛选项
    function clickGoodOf(item:any,index:number){
        let arr = []
        arr.push(item.id)
        setChooseGoodOf([...chooseGoodOf,...arr])
    }
    function removeChooseItem(id:number){
        let removeAfter = chooseGoodOf.filter((t:any)=>t !== id)
        setChooseGoodOf(removeAfter)
    }   
    // 重置弹框
    function refreshChoose(){
        setChooseGoodOf([])
    }
    // 提交弹框中选择的内容
    function updateChoose(){  
        let nameList:Array<any>= []
        goodOf.map(item =>{
            if(chooseGoodOf.includes(item.id)){
                nameList.push(item.name)
            }
        })
        let formItemObj:any = {...formItem}
        formItemObj.tags =[...nameList]
        handleFormSearch(formItemObj)
        setVisible(false)
    }
  return (
    <div className="search">
        <div className="buttonList">
            {teacherType.map(item=>{
                return (
                    <Button
                        className={formItem.status == item.value?'active':''}
                        key={item.value}
                        value={item.value} 
                        onClick={()=>{changeButton(item)}}
                    >
                        {item.label}
                    </Button>
                )
            })}
        </div>
        <div className="search_input">
            <Search 
                placeholder="input search text" 
                onSearch={onSearch} 
                enterButton 
            />
            <Button onClick={showTags}>筛选</Button>
        </div>
        <Drawer 
            width={250}
            title="擅长方向" 
            placement="right" 
            className='drawer'
            onClose={onClose} 
            visible={visible}>
                {goodOf.map((item,index)=>{
                    return (
                        <div className="beGoodAt">
                             <Button
                                className={chooseGoodOf.includes(item.id)?'active':''}
                                onClick={()=>{clickGoodOf(item,index)}}
                                key={index}
                            >{item.name}
                            </Button>
                            {chooseGoodOf.includes(item.id)&&<div className="removeChoose" onClick={()=>removeChooseItem(item.id)}></div>}
                        </div>
                    )
                })}
                <div className="repeatOrSure">  
                    <Button onClick={refreshChoose}>重置</Button>
                    <Button onClick={updateChoose}>确定</Button>
                </div>
               
            </Drawer>
    </div>
  )
}
